* {
	margin: 0;
	padding: 0;
	/* 动画内文字不可选中 */
	user-select: none;
}

body {
	background-color: white;
}

/* 最外层div */
.main {
	margin: 0 auto;
	width: 100vmin;
	height: 100vmin;
}

/* 动画容器 */
.an-wrap {
	margin: 0 auto;
	width: 100vmin;
	height: 80%;
	/* background-color: #ffffe6; */
	position: relative;
}

/* 控制容器 */
.ct-wrap {
	width: 100vmin;
	margin: 5% auto;
	height: 10%;
	/* background-color: bisque; */
	display: flex;
	justify-content: space-around;
	align-items: center;
}

/* 按钮-蓝 */
.button-blue {
	text-align: center;
	line-height: 8vmin;
	font-size: 3vmin;
	color: white;
	width: 20vmin;
	height: 8vmin;
	border-radius: 1vmin;
	border: none;
	box-shadow: 0 1vmin 2vmin #ccc;
	cursor: pointer;
	background-color: rgba(64, 158, 255, 0.8);
	position: relative;
	overflow: hidden;
	top: 0;
	transition: 0.4s;
}

.button-blue:hover {
	position: relative;
	top: -0.5vmin;
	box-shadow: 0 1.5vmin 3vmin #aaa;
}

.button-blue:before {
	transition: 0.4s;
	position: absolute;
	bottom: -26vmin;
	left: -26vmin;
	content: "";
	background-color: rgba(64, 158, 255, 1);
	width: 30vmin;
	height: 30vmin;
	border-radius: 15vmin;
	z-index: -1;
}

.button-blue:hover:before {
	position: absolute;
	bottom: -15vmin;
	left: -5vmin;
	width: 30vmin;
	height: 30vmin;
}

/* 按钮-绿 */
.button-green {
	text-align: center;
	line-height: 8vmin;
	font-size: 3vmin;
	color: white;
	width: 20vmin;
	height: 8vmin;
	border-radius: 1vmin;
	border: none;
	box-shadow: 0 1vmin 2vmin #ccc;
	cursor: pointer;
	background-color: rgba(133, 206, 97, 0.8);
	position: relative;
	overflow: hidden;
	top: 0;
	transition: 0.4s;
}

.button-green:hover {
	position: relative;
	top: -0.5vmin;
	box-shadow: 0 1.5vmin 3vmin #aaa;
}

.button-green:before {
	transition: 0.4s;
	position: absolute;
	bottom: -26vmin;
	left: -26vmin;
	content: "";
	background-color: rgba(133, 206, 97, 1);
	width: 30vmin;
	height: 30vmin;
	border-radius: 15vmin;
	z-index: -1;
}

.button-green:hover:before {
	position: absolute;
	bottom: -15vmin;
	left: -5vmin;
	width: 30vmin;
	height: 30vmin;
}

/* 按钮-橙 */
.button-orange {
	text-align: center;
	line-height: 8vmin;
	font-size: 3vmin;
	color: white;
	width: 20vmin;
	height: 8vmin;
	border-radius: 1vmin;
	border: none;
	box-shadow: 0 1vmin 2vmin #ccc;
	cursor: pointer;
	background-color: rgba(255, 140, 0, 0.8);
	position: relative;
	overflow: hidden;
	top: 0;
	transition: 0.4s;
}

.button-orange:hover {
	position: relative;
	top: -0.5vmin;
	box-shadow: 0 1.5vmin 3vmin #aaa;
}

.button-orange:before {
	transition: 0.4s;
	position: absolute;
	bottom: -26vmin;
	left: -26vmin;
	content: "";
	background-color: rgba(255, 140, 0, 1);
	width: 30vmin;
	height: 30vmin;
	border-radius: 15vmin;
	z-index: -1;
}

.button-orange:hover:before {
	position: absolute;
	bottom: -15vmin;
	left: -5vmin;
	width: 30vmin;
	height: 30vmin;
}

/* 按钮-红 */
.button-red {
	text-align: center;
	line-height: 8vmin;
	font-size: 3vmin;
	color: white;
	width: 20vmin;
	height: 8vmin;
	border-radius: 1vmin;
	border: none;
	box-shadow: 0 1vmin 2vmin #ccc;
	cursor: pointer;
	background-color: rgba(234, 32, 39, 0.8);
	position: relative;
	overflow: hidden;
	top: 0;
	transition: 0.4s;
}

.button-red:hover {
	position: relative;
	top: -0.5vmin;
	box-shadow: 0 1.5vmin 3vmin #aaa;
}

.button-red:before {
	transition: 0.4s;
	position: absolute;
	bottom: -26vmin;
	left: -26vmin;
	content: "";
	background-color: rgba(234, 32, 39, 1.0);
	width: 30vmin;
	height: 30vmin;
	border-radius: 15vmin;
	z-index: -1;
}

.button-red:hover:before {
	position: absolute;
	bottom: -15vmin;
	left: -5vmin;
	width: 30vmin;
	height: 30vmin;
}


/* 文本输入框 */
.control-input-wrap {

	height: 8vmin;
	width: 20vmin;
	position: relative;
}

.control-input-wrap-input {
	color: #555;
	text-align: center;
	transition: 0.3s;
	font-size: 3vmin;
	height: 8vmin;
	width: 20vmin;
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 0.4vmin solid #999;
	position: absolute;
	top: calc(-50%-20px);
}


.control-input-wrap-input-focus {
	transition: 0.3s;
	border-bottom: 0.1vmin solid rgba(70, 70, 70, 0);
	box-shadow: 0 0 2vmin 1vmin #c2f4ff;
}

.control-input-wrap-div {
	pointer-events: none;
	transition: 0.3s;
	line-height: 8vmin;
	position: absolute;
	width: 100%;
	top: 0;
	color: #aaa;
	text-align: center;
	font-size: 3vmin;
	white-space: nowrap;
}

.control-input-wrap-div-focus {
	transition: 0.3s;
	font-size: 1vmin;
	top: -3vmin;
}

/* 弹出消息的队列 */
.msgQueueWrap {
	/* 穿透点击 */
	/* pointer-events: none; */
	height: 80vmin;
	width: 30vmin;
	position: fixed;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: ;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.msgItem-msgIndex {
	align-self: flex-end;
	transition:0.2s;
	opacity: 0.9;
	background-color: #9ce572;
	width: 26vmin;
	min-height: 10vmin;
	margin: 2vmin;
	border-radius: 1.5vmin;
	word-wrap: break-word;
	box-shadow: inset 0.5vmin 0.5vmin 0.2vmin rgba(255, 255, 255, 0.3), inset -0.5vmin -0.5vmin 0.3vmin rgba(0, 0, 0, 0.1);
	border: 0.2vmin solid rgba(0, 0, 0, 0);
}
.msgItem-msgIndex:hover {
	opacity: 1;
	box-shadow: ;
	border: 0.2vmin solid rgba(55, 55, 55, 0.2);
}

.msgItem-enter,.msgItem-leave-to {
	transition: 0.2s;
	transform: translateX(10vmin) ;
  opacity: 0;
}

/* .msgItem-leave-to{
	transition: 0;
	opacity: 0;
} */
.msgItem-leave-active {
  position: absolute;
}



.msgItem_title {
	/* color: #555; */
	font-weight: 600;
	margin: 1.2vmin;
	font-size: 2vmin;
}

.msgItem_text {
	/* color: #555; */
	font-weight: 600;
	margin: 1.2vmin;
	font-size: 1.7vmin;
}
